<template>
  <div>
    <a-collapse :collapsible="'header'" v-model:activeKey="openKeys">
      <template #expandIcon></template>
      <template v-for="item in menuList" :key="item.key">
        <template v-if="!item.children || !item.children.length">
          <div
            class="collapse-noChildren-item"
            :class="{'is_active_item': checkKey === item.key}"
            @click.prevent="$emit('itemCheck', item)"
            :style="{paddingLeft: `${item.key!.split('-').length * 2 * 14}px`}">
            {{item.title}}
          </div>
        </template>
        <template v-else>
          <a-collapse-panel :key="item.key" :class="{'is_active_item': checkKey === item.key}">
            <template #header>
              <span class="collapse-children-item" :class="{'is_active_item': checkKey === item.key}">
                <span :style="{paddingLeft: `${(item.key!.split('-').length - 1) * 2 * 14}px`}">
                  <RightOutlined class="menu_icon" :rotate="openKeys.includes(item.key)? 90 : 0" />
                </span>
                <span class="menu_title" @click.stop="$emit('itemCheck', item)">{{item.title}}</span>
              </span>
            </template>
            <Collap :menus="item.children" :checkKey="checkKey" @itemCheck="(parm: string) => $emit('itemCheck', parm)"></Collap>
          </a-collapse-panel>
        </template>
      </template>
    </a-collapse>
  </div>
</template>
<script lang="ts">
// import { defineComponent } from 'vue'
export default {
  name: 'Collap',
}
</script>
<script setup lang="ts">
import useThemeConfig from '@/hooks/useThemeConfig';
import { computed, toRefs, PropType, ref } from 'vue'
import { RightOutlined } from '@ant-design/icons-vue'
import { Menuss } from './typing'

const props = defineProps({
  menus:{
    type: Array as PropType<Array<Menuss>>,
    required: true
  },
  checkKey: String
})

// debugger
const { menus, checkKey } = toRefs(props)

const openKeys = ref([] as Array<string> )
// 导航栏数据
const menuList = computed(() => {
  if(!menus) return []
  return menus.value
})

const {
  theme
}= useThemeConfig()

</script>
<style lang="less" scoped>
.menu_icon{
  color: v-bind("theme.fontColor");
  &:hover{
    color: v-bind("theme.fontCheckColor");
  }
}
.menu_title:hover{
  color: v-bind("theme.fontCheckColor");
}
.is_active_item{
  color: v-bind("theme.fontCheckColor") !important;
  &>.menu_title{
    color: v-bind("theme.fontCheckColor") !important;
  }
  &>.ant-collapse-header{
    background: v-bind("theme.blurColor");
  }
}
.collapse-noChildren-item.is_active_item, .collapse-children-item.is_active_item{
  background: v-bind("theme.blurColor");
}

.collapse-noChildren-item{
  padding: 12px 16px;
  &:hover{
    background: v-bind("theme.blurColor");
    cursor: pointer;
    color: v-bind("theme.fontCheckColor");
  }
}

/deep/ .ant-collapse{
  background: transparent;
  border: none;
  .ant-collapse-content{
    background: transparent;
    border: none;
  }
  .ant-collapse-header-text{
    display: inline-block;
    width: 100%;
    .collapse-children-item{
      display: inline-block;
      width: 100%;
      padding: 0px 16px;
      &:hover{
        .menu_title{
          color: v-bind("theme.fontCheckColor") !important;
        }
      }
      .menu_title{
        padding: 12px 0px;
        display: inline-block;
        width: calc(100% - 30px);
      }
    }
  }
  .ant-collapse-header{
    padding: 0px !important;
      &:hover{
        background: v-bind("theme.blurColor");
      }
  }
  .ant-collapse-content > .ant-collapse-content-box{
    padding: 0px;
  }
  & > .ant-collapse-item{
    border: none;
  }
}
</style>
